<template>
  <div>
    <search-component
      v-if="config.componentShow.searchComponentShow"
      :search-show="config.componentShow.searchComponentShow"
      :search-data="searchForm"
      :search-options="config.searchOptions"
      :search-item="config.itemConfig"
    >
    </search-component>

    <v-subheader>form</v-subheader>

    <form-component
      :form-show="config.componentShow.formComponentShow"
      :form-data="form"
      :form-options="config.formOptions"
      :form-item="config.itemConfig"
    >
    </form-component>

    <operation-component
      v-if="config.componentShow.operationComponentShow"
      :operation-btn-list="config.operationBtnList"
      :add-btn-defined="config.addBtn"
      :add-btn-disabled="config.addBtnDisabled"
      :add-btn-show="config.addBtnShow"
      :add-btn-class="config.addBtnClass"
      @setAddBtn="addBtn => (config.addBtn = addBtn)"
      @tableAdd="tableAdd"
      @btnListCB="pageBtnCB"
    >
    </operation-component>

    <table-component v-if="config.componentShow.tableComponentShow"></table-component>

    <pagination-component v-if="config.componentShow.paginationComponentShow"></pagination-component>

    <dialog-component
      v-if="config.componentShow.dialogComponentShow"
      v-model="config.dialogConfig"
      :form-data="form"
      :form-config="config"
    >
    </dialog-component>
  </div>
</template>

<script>
import SearchComponent from '../SearchComponent/SearchComponent.vue'
import OperationComponent from '../OperationComponent/OperationComponent.vue'
import TableComponent from '../TableComponent/TableComponent.vue'
import PaginationComponent from '../Pagination/PaginationComponent.vue'
import DialogComponent from '../DialogComponent/DialogComponent.vue'

import { initPageConfigComponetShow } from './MainPage.js'
import FormComponent from '../FormCompoent/FormComponent.vue'
export default {
  // MainPage
  name: 'MainPage',

  components: {
    /**
     * 基本组件 1. 搜索组件； 2. 操作组件；3. 表格组件； 4. 分页器组件； 5. 弹窗组件
     */
    SearchComponent,
    OperationComponent,
    TableComponent,
    PaginationComponent,
    DialogComponent,
    FormComponent
  },

  props: {
    // 页面配置
    pageConfig: { type: Object, required: true },
    // 搜索表单数据
    formData: { type: Object, default: () => {} },
    // 弹窗配置
    searchData: { type: Object, default: () => {} }
  },

  data() {
    return {
      // 页面总配置
      config: this.pageConfig,
      // 显示组件默认值
      componentShow: {
        searchComponentShow: true, // 搜索组件显示
        operationComponentShow: true, // 操作组件显示
        formComponentShow: true, // 操作组件显示 测试用
        tableComponentShow: true, // 表格组件显示
        paginationComponentShow: true, // 分页器组件显示
        dialogComponentShow: true // 弹窗组件显示
      },
      // 弹窗表单数据
      form: this.formData,
      // 搜索表单数据
      searchForm: this.searchData,
      // 弹窗配置
      dialogConfig: this.pageConfig.dialogConfig
    }
  },

  computed: {},

  watch: {
    // 重定向到 pageConfig 下的 dialogConfig
    'pageConfig.dialogConfig': {
      handler(nv) {
        this.dialogConfig = nv
      }
    }
  },

  created() {
    // 初始化组件显示
    initPageConfigComponetShow(this.pageConfig, 'componentShow', this.componentShow)
  },

  mounted() {},

  methods: {
    /** 页面所有自定义按钮的回调 */
    pageBtnCB(methodName, el) {
      // this[methodName](el)
      this.$emit('pageBtnCB', methodName, el)
    },

    // 新增
    tableAdd(el, component) {
      this.dialogConfig.show = true
      this.$emit('tableAdd', el, component)
    }
  }
}
</script>

<style lang="scss" scoped></style>
